<template xmlns="http://www.w3.org/1999/html">
    <div class="sea-page-row">
        <font-tree class="page-left width-25" :provider="dept.list" :mapper="dept.deptTreeMapper"
                        :change="onchange"></font-tree>

        <div class="page-right box">
            <!-- drawer -->
            <el-dialog class="no-padding margin" v-model="create_dialog.open"
                       :width="create_dialog.width" :title="create_dialog.title">
            </el-dialog>
            <el-dialog class="no-padding margin" v-model="modify_dialog.open"
                       fullscreen :title="modify_dialog.title">
                <modify :object="modify_dialog.item"></modify>
            </el-dialog>

            <font-net-frame ref="tableObject" :query="user.page" :where="where">

                <!-- form-header -->
                <template #title>
                    <sea-table-title title="用户管理" subtitle=""></sea-table-title>
                </template>

                <!-- form-buttons -->
                <template #buttons>
                    <el-button plain title="新增"><i class="fa fa-fw fa-plus flex-header"></i></el-button>
                </template>

                <!-- form-data -->
                <template #default="{list}">
                    <el-table :data="list">
                        <sea-col-link property="account" label="账号" width="180" :click="onAction"></sea-col-link>
                        <sea-col-link property="username" label="昵称" width="180" :click="onAction"></sea-col-link>
                        <el-table-column property="phone" label="电话" width="180"></el-table-column>
                        <sea-col-dictionary type="dic" property="gender" label="性别" width="96"
                                            options="non.user_gender"></sea-col-dictionary>
                        <sea-col-switch property="disabled" label="是否可用" width="96"
                                        :change="onAction" reverse></sea-col-switch>
                        <el-table-column property="gmtCreate" label="创建时间" width="180"></el-table-column>
                        <el-table-column property="gmtModified" label="修改日期" width="180"></el-table-column>
                    </el-table>
                </template>
            </font-net-frame>
        </div>
    </div>
</template>

<script setup lang="ts">
// import create from "./create";
import modify from "./modify.vue";
import Bamboo from "@/lang/bamboo";
import {reactive, ref, watch} from "vue";
import user from "./user";
import dept from "@/view/core/auth/dept/dept";
import FontTree from "@/components/project/font-tree.vue";

const treeRef = ref();

const keyword = ref('');

const where = ref({deptId: ''});

/**
 * 分组发生变化
 *
 * @param node -
 */
const onchange = (node) => {
    where.value = {deptId: node.id};
}

interface Dialog {
    // 是否展开
    open: boolean,
    // 标题栏
    title: string,
    // 宽度
    width: string,
    // 弹窗联动元素
    item: unknown
}

// 创建界面参数
const create_dialog = reactive<Dialog>({
    // 是否展开
    open: false,
    // 标题栏
    title: '新增用户',
    // 宽度
    width: '50%',
    // 弹窗联动元素
    item: undefined
});

// 修改界面参数
const modify_dialog = reactive({
    // 是否展开
    open: false,
    // 标题栏
    title: '用户详情',
    // 宽度
    width: '50%',
    // 弹窗联动元素
    item: undefined
});

/**
 * 查询结果转换为树形结构
 */
const resultParser = (list) => {
    return Bamboo.toTree(list, Bamboo.mapper_dept);
}

watch(() => keyword, (val) => {
    treeRef.value.filter(val)
});

/**
 * 模糊检索部门
 */
const filterNode = (value, data) => {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
}

let preNode = undefined;

const onNodeClick = (data, node) => {
    selectGroup.value = data.label;
    data.checked = '121312';
    if (preNode != null) {
        preNode.checked = false;
    }
    preNode = data;
}

const selectGroup = ref('');

/**
 * 事件分发
 *
 * @param evt   事件名称
 * @param row   行级数据，可以直接修改
 * @param arg   发生变动的数据信息
 */
const onAction = (evt, row = undefined, arg = undefined) => {
    if (evt === 'new') {
        create_dialog.open = true;
    } else if (evt === '$account' || evt === '$username') {
        modify_dialog.open = true;
        modify_dialog.item = row;
    }
}
</script>
